<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="400" height="350"></canvas>
    <script>
        const canvas = document.getElementById("physicsCanvas");
        const ctx = canvas.getContext("2d");

        // Helper function to draw a line with an arrowhead
        function drawArrow(ctx, fromx, fromy, tox, toy) {
            const headlen = 10; // length of head in pixels
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        }

        // Set common styles to match the hand-drawn look
        ctx.lineWidth = 2.5;
        ctx.strokeStyle = "black";
        ctx.fillStyle = "black";
        ctx.font = "italic 22px Times";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";

        // Define main coordinates and dimensions
        const centerX = 180;
        const centerY = 160;
        const radius = 80;

        // 1. Draw the circle representing the electron shell
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
        ctx.stroke();

        // 2. Draw the label 'e' at the center
        ctx.fillText("e", centerX, centerY + 8);

        // 3. Draw the radius line labeled 'a'
        const a_angle = -2 * Math.PI / 3; // Angle for the 'a' line (approx. 120 degrees CCW from z-axis)
        const a_endX = centerX + radius * Math.cos(a_angle);
        const a_endY = centerY + radius * Math.sin(a_angle);
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(a_endX, a_endY);
        ctx.stroke();
        ctx.fillText("a", centerX + 0.6 * radius * Math.cos(a_angle) + 5, centerY + 0.6 * radius * Math.sin(a_angle) - 5);

        // 4. Draw the z-axis
        const z_endX = centerX + 160;
        ctx.beginPath();
        drawArrow(ctx, centerX, centerY, z_endX, centerY);
        ctx.stroke();
        ctx.fillText("z", z_endX + 15, centerY);

        // 5. Draw the position vector 'r'
        const r_angle = -Math.PI / 6; // Angle for the 'r' vector (30 degrees CW from z-axis)
        const r_length = 140;
        const r_endX = centerX + r_length * Math.cos(r_angle);
        const r_endY = centerY + r_length * Math.sin(r_angle);
        ctx.beginPath();
        drawArrow(ctx, centerX, centerY, r_endX, r_endY);
        ctx.stroke();
        ctx.fillText("r", r_endX + 5, r_endY - 10);

        // 6. Draw the angle arc for 'θ'
        const theta_arc_radius = 50;
        ctx.beginPath();
        ctx.arc(centerX, centerY, theta_arc_radius, r_angle, 0); // Arc from 'r' vector to z-axis
        ctx.stroke();
        // Position the 'θ' label within the arc
        const theta_label_angle = r_angle / 2;
        ctx.fillText("θ", centerX + (theta_arc_radius + 10) * Math.cos(theta_label_angle), centerY + (theta_arc_radius + 20) * Math.sin(theta_label_angle));

        // 7. Draw the velocity representation (arrow and label)
        const v_y = centerY + 30;
        const label_x = centerX + 50;
        const arrow_start_x = label_x - 10;
        const arrow_end_x = arrow_start_x - 50;
        ctx.beginPath();
        drawArrow(ctx, arrow_start_x, v_y, arrow_end_x, v_y);
        ctx.stroke();
        ctx.textAlign = "left";
        ctx.fillText("v \u226A c", label_x, v_y);

        // 8. Draw the figure caption and the stray comma mark
        ctx.textAlign = "center";
        ctx.font = "bold 24px Times";
        ctx.fillText("Fig. 2.83", centerX + 50, centerY + radius + 70);
        ctx.font = "30px Times";
        ctx.fillText(",", centerX - 30, centerY + radius + 40);

    </script>
</body>
</html>